<template>
  <PageLayout class="p-24">
    <a-card>
      <div class="d-flex">
        <div class="flex-1">
          <a-descriptions title="设备基本信息"> </a-descriptions>
          <div class="d-flex">
            <div>
              <a-image
                :width="200"
                height="100%"
                objectFit="cover"
                :src="detail.image"
              />
            </div>
            <div class="flex-1 px-24">
              <a-descriptions :column="2">
                <a-descriptions-item label="所属门店">{{
                  detail.shopName
                }}</a-descriptions-item>
                <a-descriptions-item label="设备状态">{{
                  detail.onlineStatus == 0 ? "在线" : "离线"
                }}</a-descriptions-item>
                <a-descriptions-item label="设备机器号">{{
                  detail.deviceSn
                }}</a-descriptions-item>
                <a-descriptions-item label="设备编号">{{
                  detail.deviceNo
                }}</a-descriptions-item>
                <a-descriptions-item label="设备激活时间">{{
                  detail.activeTime
                }}</a-descriptions-item>
                <a-descriptions-item label="设备服务次数">{{
                  detail.serviceNum
                }}</a-descriptions-item>
                <a-descriptions-item label="设备在线时间">{{
                  detail.timeStr
                }}</a-descriptions-item>
                <a-descriptions-item label="设备所在地区">{{
                  `${detail.province}/${detail.city}/${detail.area}`
                }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </div>
        <div style="width: 300px">
          <a-descriptions title="设备url/设备二维码"> </a-descriptions>
          <a-image
            :width="200"
            objectFit="cover"
            :src="detail.deviceQrBase64"
          />
        </div>
      </div>
    </a-card>
    <a-card>
      <a-descriptions
        title="门店绑定情况"
        bordered
        :column="2"
        :labelStyle="{ width: '200px' }"
      >
        <a-descriptions-item label="门店名称">{{
          detail.shopName
        }}</a-descriptions-item>
        <a-descriptions-item label="门店ID">{{
          detail.shopId
        }}</a-descriptions-item>
        <a-descriptions-item label="客户专员">{{
          detail.customerSpecialistName
        }}</a-descriptions-item>
        <a-descriptions-item label="客户专员ID">{{
          detail.customerSpecialistId
        }}</a-descriptions-item>
        <a-descriptions-item label="商户名称">{{
          detail.shopUserName
        }}</a-descriptions-item>
        <a-descriptions-item label="商户联系方式">{{
          detail.shopUserPhone
        }}</a-descriptions-item>
        <a-descriptions-item label="代理商名称">{{
          detail.field4
        }}</a-descriptions-item>
        <a-descriptions-item label="代理商ID">{{
          detail.field4
        }}</a-descriptions-item>
        <a-descriptions-item label="区域经理">{{
          detail.field4
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <!-- <a-card>
      <div style="width: 500px">
        <a-descriptions title="用料情况" :column="1">
          <a-descriptions-item label="洗发水">
            <a-progress :percent="detail.hampoo" :showInfo="false" />
            <a-button type="primary" @click="updateMaterial(0)" class="ml-16"
              >更新原料</a-button
            >
          </a-descriptions-item>
          <a-descriptions-item label="护发素">
            <a-progress :percent="detail.conditioner" :showInfo="false" />
            <a-button type="primary" @click="updateMaterial(1)"  class="ml-16"
              >更新原料</a-button
            >
          </a-descriptions-item>
          <a-descriptions-item label="养发液">
            <a-progress :percent="detail.hairtonic" :showInfo="false" />
            <a-button type="primary" @click="updateMaterial(2)"  class="ml-16"
              >更新原料</a-button
            >
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card> -->
  </PageLayout>
</template>

<script setup>
import { onMounted } from "vue";
import {
  postDeviceStatistics,
  postDeviceDetail,
  postDeviceMaterialReplace,
} from "@/api/common";
const route = useRoute();
const detail = ref({
  field1: "深圳1店",
  field2: "深圳1店",
  field3: "深圳1店",
  field4: "深圳1店",
});
const columns1 = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "账号",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "角色",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "姓名",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "手机号",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
];
onMounted(() => {
  getDetail();
});
const getDetail = () => {
  postDeviceDetail({ id: route.query.id }).then((res) => {
  console.log('res.data',res.data);
    detail.value = res.data;
  });
};
const updateMaterial = (materialType) => {
  postDeviceMaterialReplace({
    id: route.query.id,
    materialType,
  }).then((res) => {
    console.log("res", res);
    getDetail();
  });
};
</script>

<style lang="less" scoped></style>
